extends /_layout/default.pug

block view
  .fade-in
    .card
      .card-header
        strong Standard Buttons
      .card-body
        .row.align-items-center
          .col-12.col-xl.mb-3.mb-xl-0
            | Normal
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-primary(type='button') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-secondary(type='button') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-success(type='button') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-warning(type='button') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-danger(type='button') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-info(type='button') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-light(type='button') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-dark(type='button') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-link(type='button') Link
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Active State
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-primary.active(type='button', aria-pressed='true') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-secondary.active(type='button', aria-pressed='true') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-success.active(type='button', aria-pressed='true') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-warning.active(type='button', aria-pressed='true') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-danger.active(type='button', aria-pressed='true') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-info.active(type='button', aria-pressed='true') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-light.active(type='button', aria-pressed='true') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-dark.active(type='button', aria-pressed='true') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-link.active(type='button', aria-pressed='true') Link
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Disabled
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-primary(type='button', disabled='') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-secondary(type='button', disabled='') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-success(type='button', disabled='') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-warning(type='button', disabled='') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-danger(type='button', disabled='') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-info(type='button', disabled='') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-light(type='button', disabled='') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-dark(type='button', disabled='') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-link(type='button', disabled='') Link
    .card
      .card-header
        strong Outline Buttons
      .card-body
        p
          | Use
          code .btn-outline-*
          |  class for outline buttons.
        .row.align-items-center
          .col-12.col-xl.mb-3.mb-xl-0
            | Normal
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-primary(type='button') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-secondary(type='button') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-success(type='button') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-warning(type='button') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-danger(type='button') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-info(type='button') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-light(type='button') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-dark(type='button') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Active State
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-primary.active(type='button', aria-pressed='true') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-secondary.active(type='button', aria-pressed='true') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-success.active(type='button', aria-pressed='true') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-warning.active(type='button', aria-pressed='true') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-danger.active(type='button', aria-pressed='true') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-info.active(type='button', aria-pressed='true') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-light.active(type='button', aria-pressed='true') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-dark.active(type='button', aria-pressed='true') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Disabled
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-primary(type='button', disabled='') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-secondary(type='button', disabled='') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-success(type='button', disabled='') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-warning(type='button', disabled='') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-danger(type='button', disabled='') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-info(type='button', disabled='') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-light(type='button', disabled='') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-outline-dark(type='button', disabled='') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
    .card
      .card-header
        strong Ghost Buttons
      .card-body
        p
          | Use
          code .btn-ghost-*
          |  class for ghost buttons.
        .row.align-items-center
          .col-12.col-xl.mb-3.mb-xl-0
            | Normal
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-primary(type='button') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-secondary(type='button') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-success(type='button') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-warning(type='button') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-danger(type='button') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-info(type='button') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-light(type='button') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-dark(type='button') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Active State
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-primary.active(type='button', aria-pressed='true') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-secondary.active(type='button', aria-pressed='true') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-success.active(type='button', aria-pressed='true') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-warning.active(type='button', aria-pressed='true') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-danger.active(type='button', aria-pressed='true') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-info.active(type='button', aria-pressed='true') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-light.active(type='button', aria-pressed='true') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-dark.active(type='button', aria-pressed='true') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Disabled
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-primary(type='button', disabled='') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-secondary(type='button', disabled='') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-success(type='button', disabled='') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-warning(type='button', disabled='') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-danger(type='button', disabled='') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-info(type='button', disabled='') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-light(type='button', disabled='') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-block.btn-ghost-dark(type='button', disabled='') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
    .card
      .card-header
        strong Square Buttons
      .card-body
        p
          | Use
          code .btn-square
          |  class for square buttons.
        .row.align-items-center
          .col-12.col-xl.mb-3.mb-xl-0
            | Normal
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-primary(type='button') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-secondary(type='button') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-success(type='button') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-warning(type='button') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-danger(type='button') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-info(type='button') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-light(type='button') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-dark(type='button') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-link(type='button') Link
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Active State
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-primary.active(type='button', aria-pressed='true') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-secondary.active(type='button', aria-pressed='true') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-success.active(type='button', aria-pressed='true') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-warning.active(type='button', aria-pressed='true') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-danger.active(type='button', aria-pressed='true') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-info.active(type='button', aria-pressed='true') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-light.active(type='button', aria-pressed='true') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-dark.active(type='button', aria-pressed='true') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-link.active(type='button', aria-pressed='true') Link
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Disabled
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-primary(type='button', disabled='') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-secondary(type='button', disabled='') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-success(type='button', disabled='') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-warning(type='button', disabled='') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-danger(type='button', disabled='') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-info(type='button', disabled='') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-light(type='button', disabled='') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-dark(type='button', disabled='') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-square.btn-block.btn-link(type='button', disabled='') Link
    .card
      .card-header
        strong Pill Buttons
      .card-body
        p
          | Use
          code .btn-pill
          |  class for pill buttons.
        .row.align-items-center
          .col-12.col-xl.mb-3.mb-xl-0
            | Normal
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-primary(type='button') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-secondary(type='button') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-success(type='button') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-warning(type='button') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-danger(type='button') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-info(type='button') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-light(type='button') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-dark(type='button') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-link(type='button') Link
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Active State
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-primary.active(type='button', aria-pressed='true') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-secondary.active(type='button', aria-pressed='true') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-success.active(type='button', aria-pressed='true') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-warning.active(type='button', aria-pressed='true') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-danger.active(type='button', aria-pressed='true') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-info.active(type='button', aria-pressed='true') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-light.active(type='button', aria-pressed='true') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-dark.active(type='button', aria-pressed='true') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-link.active(type='button', aria-pressed='true') Link
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Disabled
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-primary(type='button', disabled='') Primary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-secondary(type='button', disabled='') Secondary
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-success(type='button', disabled='') Success
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-warning(type='button', disabled='') Warning
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-danger(type='button', disabled='') Danger
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-info(type='button', disabled='') Info
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-light(type='button', disabled='') Light
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-dark(type='button', disabled='') Dark
          .col-6.col-sm-4.col-md-2.col-xl.mb-3.mb-xl-0
            button.btn.btn-pill.btn-block.btn-link(type='button', disabled='') Link
    .card
      .card-header
        strong Sizes
      .card-body
        p
          | Fancy larger or smaller buttons? Add
          code .btn-lg
          |  or
          code .btn-sm
          |  for additional sizes.
        .row.align-items-center
          .col-12.col-xl.mb-3.mb-xl-0
            | Small add
            code .btn-sm
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-sm.btn-primary(type='button') Standard Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-sm.btn-outline-secondary(type='button') Outline Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-sm.btn-ghost-success(type='button') Ghost Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-sm.btn-square.btn-warning(type='button') Square Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-sm.btn-pill.btn-danger(type='button') Pill Button
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Normal
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-primary(type='button') Standard Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-outline-secondary(type='button') Outline Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-ghost-success(type='button') Ghost Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-square.btn-warning(type='button') Square Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-pill.btn-danger(type='button') Pill Button
        .row.align-items-center.mt-3
          .col-12.col-xl.mb-3.mb-xl-0
            | Large add
            code .btn-lg
            | .
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-lg.btn-primary(type='button') Standard Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-lg.btn-outline-secondary(type='button') Outline Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-lg.btn-ghost-success(type='button') Ghost Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-lg.btn-square.btn-warning(type='button') Square Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-lg.btn-pill.btn-danger(type='button') Pill Button
    .card
      .card-header
        strong With Icons
      .card-body
        .row.align-items-center.mt-3
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-primary(type='button')
              svg.c-icon
                use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lightbulb")
              |  Standard Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-outline-secondary(type='button')
              svg.c-icon
                use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lightbulb")
              |  Outline Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-ghost-success(type='button')
              svg.c-icon
                use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lightbulb")
              |  Ghost Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-square.btn-warning(type='button')
              svg.c-icon
                use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lightbulb")
              |  Square Button
          .col-6.col-sm-4.col-md.mb-3.mb-xl-0.text-center
            button.btn.btn-pill.btn-danger(type='button')
              svg.c-icon
                use(xlink:href="node_modules/@coreui/icons/sprites/free.svg#cil-lightbulb")
              |  Pill Button
    .row
      .col-md-6
        .card
          .card-header
            strong Block Level Buttons
          .card-body
            p
              | Add this class
              code .btn-block
            button.btn.btn-secondary.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-primary.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-success.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-info.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-warning.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-danger.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-link.btn-lg.btn-block(type='button') Block level button
      // /.col
      .col-md-6
        .card
          .card-header
            strong Block Level Buttons
          .card-body
            p
              | Add this class
              code .btn-block
            button.btn.btn-outline-secondary.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-outline-primary.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-outline-success.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-outline-info.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-outline-warning.btn-lg.btn-block(type='button') Block level button
            button.btn.btn-outline-danger.btn-lg.btn-block(type='button') Block level button
      // /.col
    // /.row
